import {
  Button,
  Dimensions,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { SettingsScreenProps } from "../../types/NavigationTypes";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";

const SettingsScreen: React.FC<SettingsScreenProps> = ({
  navigation,
  route,
}) => {
  const boxHeight = useSharedValue(150);

  const boxAnimation = useAnimatedStyle(() => {
    return {
      height: withTiming(boxHeight.value, { duration: 500 }),
    };
  });

  function toggleHeight() {
    boxHeight.value === 450 ? (boxHeight.value = 150) : (boxHeight.value = 450);
  }

  return (
    <View style={{ flex: 1 }}>
      <Animated.View style={[styles.box, boxAnimation]}>
        <Button title="Change Height" onPress={() => toggleHeight()} />
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  box: {
    width: 200,
    height: 150,
    backgroundColor: "grey",
    marginHorizontal: 10,
    marginVertical: 10,
  },
});

export default SettingsScreen;
